<template>
  <el-menu
    class="ltd-menu-list"
    :default-active="actived"
    :ellipsis="false"
    mode="horizontal"
    @select="handleSelect"
  >
    <el-menu-item
      v-for="item in menus"
      :key="item.index"
      :index="item.index"
    >
      {{ item.text }}
    </el-menu-item>
  </el-menu>
</template>
<script lang="ts" setup>
import { onBeforeUpdate, reactive, ref} from "vue";
import { useRouter } from 'vue-router'

interface Menu {
  index: string,
  text?: string,
}
const props = defineProps<{
  page: string,
  menus: Menu[]
}>()
let styles = reactive({
  backgroundColor: '',
  color: ''
})
const actived = ref(props.page==='/' ? '/' : props.page.slice(1))
const router = useRouter()
const handleSelect = (index: string) => {
  router.push(`${index}`)
}
onBeforeUpdate(
  ()=> {
    actived.value = props.page==='/' ? '/' : props.page.slice(1)
    styles.color = props.page === '/' ? 'white' : 'black'
    styles.backgroundColor = props.page === '/' ? 'none' : 'rgb(255,255,255)'
  }
)
</script>
<style>
:root{
  --el-menu-active-color: rgb(92,208,194);
  --el-menu-hover-bg-color: none;
}
</style>
<style scoped>

.ltd-menu-list{
  height: 60px;
  border-bottom: none;
  background-color: v-bind('styles.backgroundColor');
}

.el-menu-item {
  font-size: var(--ltd-menu-font-size);
  color: v-bind('styles.color');
}
.ltd-menu-list :deep(
.el-menu-item:hover
){
  color: var(--ltd-color-green);
}

</style>